<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>测试标签</p>
        <p>msg:{{msg}}</p>
        <p ref="pdom">测试ref</p>
        <div ref="divdom">测试ref</div>
        <input type="button" value="打印refs" @click="printRefs">
    </div>
</body>
<script>
    // Vue的实例属性和方法，实在Vue原型上定义的属性和方法
    // Vue将在构造器原型上 以 $ 符号开头的属性和方法 重新定义为vue的实例属性方法
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"变量",
            info:"info"
        },
        computed: {
            getMsg(){
                return this.msg + ":end";
            }
        },
        methods: {
            print(){
                console.log("vue的print方法");
            },
            printRefs(){
                console.log(this.$refs)
            }
        },
    });
    console.log(vm);


    // 获取vue实例对应的 根容器
    console.log(vm.$el);

    // vue对$el添加了衣蛾特殊指向 __vue__， 描述当前容器对应的vue实例
    console.log(vm.$el.__vue__);

    // 获取当前实例的所有被监控的 data 数据变量
    console.log(vm.$data);

    // 获取当前vue实例在创建时，使用的根据开发者传入的数据模板生成的配置项
    console.log(vm.$options);

    // 获取当前vue实例容器中 定义有 ref 属性的DOM元素
    console.log(vm.$refs);
    console.log(vm.$refs.divdom);

</script>
</html>